@import '../bootstrap'
@import '../theme'

textfield($material)
  &.input-group--text-field-box
    .input-group__input
      background: $material.buttons.focused-alt

theme(textfield, "input-group--text-field")

/** Label */
.input-group--text-field label
  position: absolute
  top: $input-group-text-field-label-top
  left: 0

/** Input */
.input-group--text-field
  input,
  textarea
    caret-color: $theme.primary
    font-size: $input-font-size

.input-group--text-field input
  display: table-cell
  box-shadow: none
  flex: 1
  height: $input-height
  margin: 0
  min-width: 0
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

  &::placeholder
    transition: .3s $transition.swing

  &:focus
    outline: none

  &:disabled
    pointer-events: none

/** Textarea */
.input-group--text-field
  textarea
    flex: 1 1

    &:focus
      outline: none

.input-group--text-field.input-group--textarea
  label
    top: 13px

  .input-group__input
    border-radius: 2px

  textarea
    font-size: $input-font-size
    transition: .3s $transition.swing

  &:not(.input-group--full-width)
    label
      top: 30px
      left: 15px

    .input-group__input
      padding: 30px 0 0 13px

  .input-group__details
    &:before,
    &:after
      opacity: 0

/** Counter */
.input-group--text-field
  .input-group__counter
    margin-left: auto

    &--error
      color: $theme.error !important

/** Input States */
.input-group--text-field
  &.input-group--placeholder:not(.input-group--focused):not(.input-group--dirty)
    input::placeholder
      opacity: 0

/** Types */
.input-group--text-field
  // Icons
  &.input-group--prepend-icon
    .input-group__prepend-icon
      align-items: center
      display: flex
      justify-content: flex-start
      min-width: 40px
      transition: .3s $transition.fast-in-fast-out

    .input-group__messages
      margin-right: auto
      padding-left: 40px

    .input-group__details
      &:before, &:after
        margin-left: 40px
        max-width: calc(100% - 40px)

    label
      left: 40px

    input
      flex: auto

  &:not(.input-group--single-line)
    &.input-group--focused,
    &:focus
      label
        opacity: 1

      &:not(.input-group--textarea)
        label
          transform: translate3d(0, -18px, 0) scale(.75)

      &:not(.input-group--full-width).input-group--textarea
        label
          transform: translate3d(0, -8px, 0) scale(.75)

  &.input-group--dirty
    &.input-group--select,
    &:not(.input-group--textarea)
      label
        transform: translate3d(0, -18px, 0) scale(.75)

    &:not(.input-group--full-width).input-group--textarea
      label
        transform: translate3d(0, -8px, 0) scale(.75)

  // Multi Line
  &.input-group--multi-line
    textarea
      padding-top: 4px

  // Full Width
  &.input-group--full-width
    padding: 16px

    label
      margin-left: $grid-gutters.lg

    .input-group__details:before, .input-group__details:after
      display: none

/** Prefix/Suffix */
.input-group--prefix
  &:not(.input-group--focused):not(.input-group--dirty)
    label
      left: 0

.input-group--prefix,
.input-group--suffix
  .input-group--text-field__prefix,
  .input-group--text-field__suffix
    display: inline-flex
    font-size: 16px
    margin-top: 1px

  .input-group--text-field__prefix
    /** margin-right: 3px */
    padding-left: 4px
    width: 32px

  .input-group--text-field__suffix
    margin-left: 3px

/** Box */
.input-group--text-field-box
  input, textarea
    cursor: pointer

  label
    left: 24px

  .input-group__input
    align-items: flex-end
    border-radius: 4px 4px 0 0
    cursor: pointer
    min-height: 56px

  .input-group__details
    padding: 8px 24px 0

    &:before,
    &:after
      height: 2px
      border-bottom-left-radius: 4px
      border-bottom-right-radius: 4px

  &.input-group--multi-line
    textarea
      padding-left: 24px
      padding-right: 24px

  &:not(.input-group--textarea)
    &.input-group--multi-line
      .input-group__input
        padding-top: 26px

      label
        top: 26px

    &:not(.input-group--multi-line)
      .input-group__input
        padding-left: 24px
        padding-right: 24px

      label
        top: calc(50% - 16px)

    &:not(.input-group--single-line)
      &.input-group--focused,
      &:focus,
      &.input-group--dirty
        label
          transform: translate3d(0, -10px, 0) scale(0.75)
